<template>
    <div id="app">
        <div>
            <div class="flexWrapper">
                <!-- 
                    <div class="bar">
                        <bar></bar>
                        {{this.$store.state.testStr}}
                        {{testStr}}
                        <div>
                            <button @click="changeState">changeState</button>
                            <button @click="changeState1">填充空数组</button>
                        </div>
                        <div>
                            <ul>
                                <li v-for="(item,index) in dataArr" :key="item.age">{{item.name}}</li>
                            </ul>
                        </div>
                    </div>
                     -->
                <div class="cont">
                    <router-view></router-view>
                </div>
            </div>
        </div>
        <!-- <loading v-model="isLoading"></loading> -->
    </div>
</template>

<script>
import { Loading } from 'vux'
import { mapState } from 'vuex'
import Bar from './components/Bar'
export default {
    name: 'app',
    components: {
        Loading,
        Bar
    },
    methods: {
        changeState: function() {
            this.$store.state.testStr = '我是新值';
        },
        changeState1() {
            var tempArr = [
                {
                    name: "tony",
                    age: 32
                },
                {
                    name: "tony2",
                    age: 38
                }
            ]
            this.$store.commit('FILL_ARR', tempArr);
        }
    },
    computed: {
        ...mapState({
            isLoading: state => state.isLoading
        }),
        ...mapState({
            dataArr: state => state.dataArr
        }),
        ...mapState({
            testStr: state => state.testStr + ":::"
        })
    }
}
</script>

<style lang="less">
@import '~vux/src/styles/reset.less';
body,
html {
    height: 100%;
    width: 100%;
    overflow-x: hidden
}

#app {
    height: 100%;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
}

.wrap {
    width: 9.333333rem;
    margin: 0px auto;
}
.h20{
    height: 20px;
    overflow: hidden;
}
.flexWrapper {
    display: flex;
}

.flexWrapper .bar {
    flex: 0 0 120px;
}

.flexWrapper .cont {
    flex: 1 1 0;
}
</style>
